<template>
  <div class="content">
    <p>基础用法</p>
    <div class="group anvil">
      <anvil-color-picker
        v-model="color1"
        @change="handleChange2"
        @active-change="handleActiveChange2"
      ></anvil-color-picker>
      <anvil-color-picker v-model="color2"></anvil-color-picker>
    </div>

    <div class="group el">
      <el-color-picker
        v-model="color1"
        @change="handleChange1"
        @active-change="handleActiveChange1"
      ></el-color-picker>
      <el-color-picker v-model="color2"></el-color-picker>
    </div>

    <p>选择透明度</p>
    <div class="group anvil">
      <anvil-color-picker v-model="color" show-alpha></anvil-color-picker>
    </div>

    <div class="group el">
      <el-color-picker v-model="color" show-alpha></el-color-picker>
    </div>

    <p>预定义颜色</p>
    <div class="group anvil">
      <anvil-color-picker v-model="color2" show-alpha :predefine="predefineColors">
      </anvil-color-picker>
    </div>

    <div class="group el">
      <el-color-picker v-model="color2" show-alpha :predefine="predefineColors"> </el-color-picker>
    </div>

    <p>不同尺寸</p>
    <div class="group anvil">
      <anvil-color-picker v-model="color"></anvil-color-picker>
      <anvil-color-picker v-model="color" size="medium"></anvil-color-picker>
      <anvil-color-picker v-model="color" size="small"></anvil-color-picker>
      <anvil-color-picker v-model="color" size="mini"></anvil-color-picker>
    </div>

    <div class="group el">
      <el-color-picker v-model="color"></el-color-picker>
      <el-color-picker v-model="color" size="medium"></el-color-picker>
      <el-color-picker v-model="color" size="small"></el-color-picker>
      <el-color-picker v-model="color" size="mini"></el-color-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color1: '#409EFF',
      // color2: null,
      color: 'rgba(19, 206, 102, 0.8)',
      color2: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ]
    }
  },

  methods: {
    handleChange1(value) {
      console.log('🚀 ~ file: color-picker.vue:92 ~ value:', value)
    },
    handleActiveChange1(value) {
      console.log('🚀 ~ file: color-picker.vue:95 ~ value:', value)
    },
    handleChange2(value) {
      console.log('🚀 ~ file: color-picker.vue:98 ~ value:', value)
    },
    handleActiveChange2(value) {
      console.log('🚀 ~ file: color-picker.vue:101 ~ value:', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.group {
  /* border: 1px solid red; */
  padding: 6px;

  &.anvil {
    border-color: skyblue;
  }

  &.el {
    border-color: gray;
    display: block;
  }
}
</style>
